<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Study React</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
    <div id="test"></div>
    <pre>

    </pre>

    <script type="text/babel">
        class Demo extends React.Component {
            state = {
                person: {name: "马红俊", level: "46级控制系战魂宗", skill: "凤凰笑田鸡"},
            }

            changePlayer = ()=> {
                this.setState({
                    person: {name: "唐山", level: "48级控制系战魂宗", skill: "蓝银囚笼"}
                });
            }

            render() {
                return <div style={{border: '1px solid red', width: '400px'}}>
                    欢迎参加斗罗大陆魂师精英赛：
                    <button onClick={this.changePlayer}>大师换人</button>
                    <Player person={this.state.person} />
                </div>;
            }
        }

        class Player extends React.Component {
            // --------------   只是初次挂载的三个函数 start  -----------------
            constructor() {
                super();
                console.log("Player init: constructor");
            }

            componentWillMount(){
                console.log("Player init: componentWillMount");
            }

            componentDidMount(){
                console.log("Player init: constructor");
            }

            // --------------   只是初次加载的三个函数 end  -----------------


            // --------------   更新时执行 start  -----------------
            // 现在看来，组件更新有三种可能
            // 1. 看起来像是props改了(本质是父组件被render了)
            // 2. setState了
            // 3. forceUpdate
            componentWillReceiveProps(){
                console.log("Player componentWillReceiveProps");
            }

            shouldComponentUpdate() {
                // 初始化时是不加载的
                console.log("Player shouldComponentUpdate");
                return true;
            }

            componentWillUpdate(){
                console.log("Player componentWillUpdate");
            }

            componentDidUpdate(){
                console.log("Player componentDidUpdate");
            }
            // --------------   更新时执行 end  -----------------


            force = () => {
                // 即便state没有改变，即便shouldComponentUpdate return false, 我也能更新
                this.forceUpdate();
            }

            render() {
                console.log("Player render");
                const {name, level, skill} = this.props.person;
                return <div style={{border: '1px dashed green', width: '200px'}}>
                    史莱克上场的是：<b>{name}</b> <br/>
                    {level} <br/>
                    必杀技 {skill} <br/>
                    <button onClick={this.force}>强制render</button>
                    </div>;
            }
        }

        ReactDOM.render(<Demo />, document.getElementById("test"));
    </script>
</body>

</html>